<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sort Without Articles</title>
</head>
<body>

  <style>
    body {
      margin: 0;
      font-family: sans-serif;
      background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
      background-size: cover;
      display: flex;
      align-items: center;
      min-height: 100vh;
    }

    #bands {
      list-style: inside square;
      font-size: 20px;
      background: white;
      width: 500px;
      margin: auto;
      padding: 0;
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
    }
    #bands li {
      border-bottom: 1px solid #efefef;
      padding: 20px;
    }
    #bands li:last-child {
      border-bottom: 0;
    }

    a {
      color: #ffc600;
      text-decoration: none;
    }

  </style>

  <ul id="bands"></ul>

<script>
const bands = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];

// 去掉前缀the/a/an, 排序
function delPre(item) {
    return item.replace(/^(The|A|An)\s{1}/, ''); // 正则表达式表示, 删除/^开头的The/a/an, 并且删除后面的空格\s{1} 
}

bands.sort((a, b) => {
    return delPre(a) > delPre(b) ? 1 : -1;
});

const bandsList = document.getElementById('bands');

for (let i = 0; i < bands.length; i++) {
    bandsList.innerHTML += `<li>${bands[i]}</li>`;
}

</script>

</body>
</html>
